<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
    <script src="../build/jquery.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
        var RepoList = React.createClass({
            getInitialState: function() {
                return {
                    loading: true,
                    error: null,
                    data: null
                };
            },

            componentDidMount() {
                this.props.promise.then(
                value => this.setState({loading: false, data: value}),
                error => this.setState({loading: false, error: error}));
            },

            render: function() {
                if (this.state.loading) {
                    return <span>Loading...</span>;
                }
                else if (this.state.error !== null) {
                    return <span>Error: {this.state.error.message}</span>;
                }
                else {
                    var repos = this.state.data.items;
                    var repoList = repos.map(function (repo, index) {
                        return (
                            <li key={index}><a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}</li>
                        );
                    });
                    return (
                        <main>
                        <h1>Most Popular JavaScript Projects in Github</h1>
                        <ol>{repoList}</ol>
                        </main>
                    );
                }
            }
        });

        ReactDOM.render(
            <RepoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,
            document.getElementById('example')
        );


        /**
        *  把一个Promise对象传入组件 
        */
    </script>
  </body>
</html>
